<script setup>
import { ref, onMounted } from 'vue'
import { getAllStudents, getStudentDetail } from '@/api/admin'

const students = ref([])
const total = ref(0)
const page = ref(1)
const pageSize = 10
const loading = ref(false)
const showDialog = ref(false)
const currentDetail = ref(null)
const detailCache = ref({})
const allStudents = ref([])

const fetchStudentDetail = async (id) => {
  if (detailCache.value[id]) return detailCache.value[id]
  try {
    const res = await getStudentDetail(id)
    detailCache.value[id] = res.data || res
    return detailCache.value[id]
  } catch (e) { return {} }
}

const fetchList = async () => {
  loading.value = true
  try {
    const res = await getAllStudents({})
    const data = res.data || res
    allStudents.value = data.list || []
    total.value = allStudents.value.length
    const start = (page.value - 1) * pageSize
    const end = start + pageSize
    students.value = allStudents.value.slice(start, end)
  } catch (e) {}
  loading.value = false
}

const onPageChange = p => {
  page.value = p
  const start = (page.value - 1) * pageSize
  const end = start + pageSize
  students.value = allStudents.value.slice(start, end)
}

const showDetail = async (row) => {
  currentDetail.value = row.detail || await fetchStudentDetail(row.id)
  showDialog.value = true
}

onMounted(fetchList)
</script>

<template>
  <el-card class="admin-student-list-card">
    <h2>学生列表</h2>
    <el-table :data="students" stripe border v-loading="loading">
      <el-table-column prop="id" label="ID" min-width="80" />
      <el-table-column prop="name" label="姓名" min-width="100" />
      <el-table-column prop="school" label="院校" min-width="120" />
      <el-table-column prop="major" label="专业" min-width="100" />
      <el-table-column prop="degree" label="学历" min-width="80" />
    </el-table>
    <div class="pagination-bar">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="page"
        @current-change="onPageChange"
      />
    </div>
  </el-card>
</template>